import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Radio, Form, Row, Col, Card, Select, Space, Button, Input, InputNumber, Checkbox, Popover, notification } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import { history, connect } from 'umi';
import { InfoCircleOutlined } from '@ant-design/icons'
import { dateDisabled } from '@/common/regular';
import FormCondition from '@/components/FormCondition';
import FlxButton from '@/components/FlxButton'
import moment from 'moment';
const RuleTemplate = (props) => {
    const { rewardType, dispatch } = props
    const [data, setData] = useState({})
    const [list, setlist] = useState([])
    const [params, setParams] = useState({})
    const { assessment } = params
    const fetchData = () => {
        dispatch({
            type: 'promoter/fetchListReward',
            payload: { rewardType },
            callback: (e = []) => {
                if (e.length > 0) {
                    const { rewardStartDate, rewardEndDate, promoterRewardLevelList } = e[0]
                    setData({
                        ...e[0],
                        rewardStartDate: [rewardStartDate ? moment(rewardStartDate, 'YYYY-MM-DD HH:mm') : '', rewardEndDate ? moment(rewardEndDate, 'YYYY-MM-DD HH:mm') : ''],
                    })
                    dispatch({
                        type: 'promoter/fetchPromoterLevelDetail',
                        callback: (e) => {
                            const { promoterLevelList } = e
                            setlist(promoterLevelList.map(val => {
                                const data = promoterRewardLevelList.reduce((o, i) => {
                                    if (i.levelId === val.id) {
                                        return i
                                    }
                                    return o
                                }, null)
                                if (data) {
                                    return {
                                        ...data,
                                        levelName: val.levelName
                                    }
                                }
                                else {
                                    return {
                                        ...val,
                                        levelId: val.id
                                    }
                                }
                            }))
                        }
                    })

                    setParams(e[0])
                }
                return
            }
        })
    }

    const fetchRoleEdit = () => {
        form.validateFields().then((values) => {
            const { rewardStartDate
            } = values
            dispatch({
                type: 'promoter/fakeSaveReward',
                payload: {
                    promoterRewardList: [{
                        ...values,
                        rewardType,
                        rewardStartDate: rewardStartDate ? moment(rewardStartDate[0]).format('YYYY-MM-DD HH:mm') : '',
                        rewardEndDate: rewardStartDate ? moment(rewardStartDate[1]).format('YYYY-MM-DD HH:mm') : '',
                        promoterRewardLevelList: list.filter((item) => {
                            const { userConditionFlag,
                                costConditionFlag,
                                promoterConditionFlag,
                                validPromoterConditionFlag,
                                orderConditionFlag,
                                shareConditionFlag,
                                validPromoterUserConditionFlag, } = item
                            if (userConditionFlag === '1' || costConditionFlag === '1' || promoterConditionFlag === '1' || validPromoterConditionFlag === '1' || orderConditionFlag === '1' || shareConditionFlag === '1' || validPromoterUserConditionFlag === '1') {
                                return true
                            } else {
                                return false
                            }
                        })
                    }]
                },
                callback: () => {
                    fetchData()
                }
            })
        });
    };
    useEffect(() => {
        fetchData()
    }, [])


    const [form] = Form.useForm();
    const formItemLayout = {
        labelCol: {
            sm: { span: 0 },
        },
        wrapperCol: {
            sm: { span: 0 },
        },
    };
    const inputProps = {
        levelName: '',
        userConditionFlag: '0',
        costConditionFlag: '0',
        promoterConditionFlag: '0',
        validPromoterConditionFlag: '0',
        orderConditionFlag: '0',
        shareConditionFlag: '0',
        validPromoterUserConditionFlag: '0',
        userConditionValue: 0,
        costConditionValue: 0,
        promoterConditionValue: 0,
        goodsCommissionPercentage: 0,
        inviteCommissionPercentage: 0,
        validPromoterConditionValue: 0,
        orderConditionValue: 0,
        shareConditionValue: 0,
        validPromoterUserConditionValue: '0',
        systemFlag: '0',
        assessment: '',
    }
    const maxLength = 8
    const setListValue = (data) => {
        setlist(list.map((item, index) => {
            if (data.index === index) {
                return {
                    ...item, ...data
                }
            }
            return item
        }))
    }
    const addList = () => {
        if (list.length >= maxLength) {
            notification.warning({
                message: '温馨提示',
                description: '已达到最大数量限制',
            })
        } else {
            setlist([...list, inputProps])
        }
    }
    const removeList = (index) => {

        setlist(list.filter((o, key) => {
            return key !== index
        }))
    }
    const getColumns = [
        {
            title: '等级名称',
            dataIndex: 'levelName',
        },
        {
            title: '等级规则',
            dataIndex: 'levelName',
            render: (e, record, index) => {
                const {
                    systemFlag,
                    userConditionFlag,
                    costConditionFlag,
                    promoterConditionFlag,
                    userConditionValue,
                    costConditionValue,
                    promoterConditionValue,
                    validPromoterConditionFlag,
                    validPromoterConditionValue,
                    validPromoterUserConditionFlag,
                    validPromoterUserConditionValue,
                    orderConditionFlag,
                    orderConditionValue,
                    shareConditionFlag,
                    shareConditionValue
                } = record
                if (systemFlag === '1') {
                    return '--'
                }
                else {
                    return <Space direction='vertical'>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={userConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                userConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>累计绑定客户</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        userConditionValue: e
                                    })
                                }} disabled={userConditionFlag !== '1'} value={userConditionValue}>
                                </InputNumber>
                                人
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={costConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                costConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>客户累计消费</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        costConditionValue: e
                                    })
                                }} disabled={costConditionFlag !== '1'} value={costConditionValue}>
                                </InputNumber>
                                元
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={promoterConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                promoterConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>累计邀请推广员</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        promoterConditionValue: e
                                    })
                                }} disabled={promoterConditionFlag !== '1'} value={promoterConditionValue}>
                                </InputNumber>
                                人
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={validPromoterConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                validPromoterConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>有效推广员</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        validPromoterConditionValue: e
                                    })
                                }} disabled={validPromoterConditionFlag !== '1'} value={validPromoterConditionValue}>
                                </InputNumber>
                                人
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={validPromoterUserConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                validPromoterUserConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>有效推广用户</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        validPromoterUserConditionValue: e
                                    })
                                }} disabled={validPromoterUserConditionFlag !== '1'} value={validPromoterUserConditionValue}>
                                </InputNumber>
                                人
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={orderConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                orderConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>订单条件</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        orderConditionValue: e
                                    })
                                }} disabled={orderConditionFlag !== '1'} value={orderConditionValue}>
                                </InputNumber>
                                个
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={shareConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                shareConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>内容分享条件</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        shareConditionValue: e
                                    })
                                }} disabled={shareConditionFlag !== '1'} value={shareConditionValue}>
                                </InputNumber>
                                个
                            </Space>
                        </div>

                    </Space>
                }

            }
        },
        {
            title: '奖励',
            width: 180,
            dataIndex: 'rewardMoney',
            render: (e, record, index) => {
                return <InputNumber addonAfter={<span>元</span>} onChange={(o) => {
                    setListValue({
                        index: index,
                        rewardMoney: o
                    })
                }} value={e}></InputNumber>
            }
        },
    ];
    const formItems1 = [
        {
            label: '奖励名称',
            name: 'rewardName',
        },
    ];
    const formItems2 = [
        {
            label: '考核周期',
            name: 'assessment',
            type: 'select',
            onChange: (e) => {
                setParams({
                    ...params,
                    assessment: e
                })
            },
            select: {
                month: '月度',
                quarter: '季度',
                year: '年度',
                period: '时间段'
            }
        },
    ];
    const formItems3 = [
        {
            label: '奖励时间',
            type: 'rangePicker',
            disabledDate: dateDisabled,
            name: 'rewardStartDate',
            end: 'rewardEndDate',
            showTime: true,
            format: 'YYYY-MM-DD HH:mm',
            visible: assessment === 'period'
        },
    ];

    return <Row gutter={24}>
        <Col span={8}>
            <FormCondition formItemLayouts={formItemLayout} form={form} formItems={formItems1} initialValues={data}></FormCondition>
        </Col>
        <Col span={8}>
            <FormCondition formItemLayouts={formItemLayout} form={form} formItems={formItems2} initialValues={data}></FormCondition>
        </Col>
        <Col span={8}>
            <FormCondition formItemLayouts={formItemLayout} form={form} formItems={formItems3} initialValues={data}></FormCondition>
        </Col>
        <Col span={24}>
            <TableDataBlock
                columns={getColumns}
                rowKey={(record) => `${record.id}`}
                list={list}
                pagination={false}
            ></TableDataBlock>
        </Col>
        <FlxButton onOk={fetchRoleEdit}></FlxButton>
    </Row >
}
export default connect(({ loading }) => ({
    loading: loading.models.promoter,
}))(RuleTemplate);
